<template>
  <div class="index">
    <el-container class="index-container">
      <el-aside class="aside" :width="isCollapse ? '60px' : '220px'">
        <el-menu :default-active="$route.path" router unique-opened :collapse="isCollapse" text-color="#fff" active-text-color="#0a0" background-color="#545c64" class="el-menu-vertical-demo">
          <nav-menu :isCollapse="isCollapse" />
        </el-menu>
      </el-aside>
      <el-container class="page">
        <el-header class="page-header">
          <navHeader @change="changeCollapse" />
        </el-header>
        <el-main class="page-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
import navMenu from "@/components/nav-menu/index"
import navHeader from "@/components/nav-header/index"
export default defineComponent({
  name: "index",
  components: { navMenu, navHeader },
  setup() {
    const isCollapse = ref(false)
    const changeCollapse = (isFold: boolean) => {
      isCollapse.value = isFold
    }

    return {
      isCollapse,
      changeCollapse
    }
  }
})
</script>

<style lang="less" scoped>
.index {
  height: 100%;
  width: 100%;
  .aside {
    background: #545c64;
    .el-menu {
      border: none;
    }
  }
  .index-container {
    background: #d9ecff;
    height: 100%;
  }
  .page-header {
    background: #545c64;
  }
}
</style>
